<template>
    <a-card title="广告列表">
        <a-table rowKey="_id" :data-source="data" :columns="[
            { title: '广告标题', slots: { customRender: 'title_render' } },
            { title: '所属平台', dataIndex: 'platform' },
            { title: '所属广告位', dataIndex: 'cname' },
            { title: '开始时间', slots: { customRender: 'starttime' }, align: 'center' },
            { title: '结束时间', slots: { customRender: 'deadline' }, align: 'center' },
            { title: '排序', dataIndex: 'sort_id' },
            { title: '是否显示', slots: { customRender: 'is_display' } },
            { title: '操作', slots: { customRender: 'options' } },
        ]" :rowSelection="{ selectedRowKeys, onChange: onSelectChange }" :pagination="{ defaultPageSize: 4 }">
            <template #title_render="{ text }">
                {{ text.title }}
                <el-tooltip effect="light" placement="right">
                    <template #content><img style="max-width: 40vw;" :src="'/api' + text.imageUrl" /></template>
                    <PictureOutlined />
                </el-tooltip>
            </template>
            <template #starttime="{ text }">
                <FieldTimeOutlined />
                {{ formatTime(text.starttime) }}
            </template>
            <template #deadline="{ text }">
                <FieldTimeOutlined />
                <span v-if="text.deadline">
                    {{ formatTime(text.deadline) }}
                </span>
                <span v-else>
                    无限期
                </span>
            </template>
            <template #is_display="{ text }">
                <a-tag v-if="text.is_display == 'true'" color="green">显示</a-tag>
                <a-tag v-else>隐藏</a-tag>
            </template>
            <template #options="{ text }">
                <el-button type="primary" @click="$router.push('/content/ad/list_edit?id=' + text._id)">编辑</el-button>
                <el-button type="danger" @click="del(text._id, text.imageUrl)">删除</el-button>
            </template>
        </a-table>
        <div class="pos" :style="data.length === 0 ? 'bottom:0;position:relative;margin-top:15px;' : ''">
            <el-button type="primary" @click="$router.push('/content/ad/list_add')">添加广告</el-button>
            <el-button type="danger" @click="delAll" :disabled="(selectedRowKeys.length === 0)">删除所选</el-button>
        </div>
    </a-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { PictureOutlined, FieldTimeOutlined } from '@ant-design/icons-vue'
import request from '@/request';
import { ElMessageBox } from 'element-plus';
import { message } from 'ant-design-vue';
// 格式化时间
const formatTime = (timestamp: any) => {
    let date = new Date(timestamp)
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
// 数据
const data = ref([])
const getData = () => {
    request.get('ment').then(({ data: { data: res } }: any) => {
        data.value = res
    })
}
onMounted(() => {
    getData()
})

// 选择的key
const selectedRowKeys = ref([])
const onSelectChange = (Keys: any) => {
    selectedRowKeys.value = Keys;
};
const delAll = () => {
    ElMessageBox.confirm(
        '此操作将永久删除这些数据, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            for (let id of selectedRowKeys.value) {
                await request.delete('ment', { params: { id, imageUrl: (data.value.find((item: any) => item._id === id) as any)['imageUrl'] } })
            }
            message.success('删除成功!')
            getData()
        })
        .catch(() => {
            message.info('用户取消删除!')
        })
}
// 删除方法
const del = (id: any, imageUrl: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            request.delete('ment', { params: { id, imageUrl } }).then(({ data }) => {
                if (data.code !== 200) {
                    message.error('删除失败!')
                    return
                }
                message.success('删除成功!')
                getData()
            })
        })
        .catch(() => {
            message.info('用户取消删除!')
        })
}
</script>

<style lang="scss" scoped>
.pos {
    position: absolute;
    bottom: 35px;
}
</style>